<template>
  <div class="orderDetele pageWrapper">
    <Loading :loading="loading">
      <Form :ref="formRef" :label-width="150" :model="formData" inline>
        <Card :bordered="true">
          <p slot="title">订单信息</p>
          <FormItem label="订单号：" style="width:30%">
            <div>{{ formData.orderId }}</div>
          </FormItem>
          <FormItem label="银行卡id：" style="width:30%">
            <div>{{formData.accFlowId }}
            </div>
          </FormItem>
          <FormItem label="支付流水号："class="orderList" style="width:30%">
            <div @click="gotoQrFlowDetail">{{ formData.flowId }}</div>
          </FormItem>
          <FormItem label="交易凭证号：" style="width:30%">
            <div>{{ formData.voucherNum }}</div>
          </FormItem>


          <FormItem label="商户名称：" style="width:30%">
            <div>{{ formData.merchantName }}</div>
          </FormItem>
          <FormItem label="商户号：" style="width:30%">
            <div>{{ formData.merchantCode }}</div>
          </FormItem>

          <FormItem label="用户id：" style="width:30%">
            <div>{{ formData.uid }}</div>
          </FormItem>

          <FormItem label="手机号：" style="width:30%">
            <div>{{ formData.mobile }}</div>
          </FormItem>
          <FormItem label="申码场景：" style="width:30%">
            <div>{{ formData.qrSource }}</div>
          </FormItem>

          <FormItem label="订单金额：" style="width:30%">
            <div>{{ getAmount(formData.orderAmount) }}</div>
          </FormItem>
          <FormItem label="优惠金额：" style="width:30%">
            <div>{{ getAmount(formData.discount) }}</div>
          </FormItem>
          <FormItem label="支付金额：" style="width:30%">
            <div>{{ getAmount(formData.payAmount) }}</div>
          </FormItem>
          <FormItem label="退款金额：" style="width:30%">
            <div>{{ getAmount(formData.refundAmount)}}</div>
          </FormItem>
          <FormItem label="订单状态：" style="width:30%">
            <Tag v-if="formData.orderStatus==='WP'" color="warning">{{ formData.orderStatusName }}</Tag>
            <Tag v-else-if="formData.orderStatus==='HC'" color="error">{{ formData.orderStatusName }}</Tag>
            <Tag v-else-if="formData.orderStatus==='ER'" color="error">{{ formData.orderStatusName }}</Tag>
            <Tag v-else-if="formData.orderStatus==='AP'" color="success">{{ formData.orderStatusName }}</Tag>
            <Tag v-else color="default">{{ formData.orderStatusName }}</Tag>
          </FormItem>

          <FormItem label="订单下单时间：" style="width:30%">
            <div>{{ formData.createDt }}</div>
          </FormItem>

          <FormItem label="支付过期时间：" style="width:30%">
            <div>{{ formData.payExpiryTime }}</div>
          </FormItem>

          <FormItem label="支付时间：" style="width:30%">
            <div>{{ formData.payTime }}</div>
          </FormItem>

          <FormItem label="异常交易：" style="width:30%">
            <Tag v-if="formData.errorTrade===1||formData.errorTrade==='1'" color="default">{{ formData.errorTradeName }}</Tag>
            <Tag v-else color="error">{{ formData.errorTradeName }}</Tag>
          </FormItem>

          <FormItem label="优惠信息：" style="width:30%">
            <div>{{ formData.couponInfo }}</div>
          </FormItem>

        </Card>
        <Card :bordered="true" v-if="formData.bankCard && formData.bankCard.flowId">
          <p slot="title">银行卡信息</p>
          <div>
            <FormItem label="发卡银行名称：" style="width:30%">
              <div>{{ formData.bankCard.bankName }}</div>
            </FormItem>
            <FormItem label="银行：" style="width:30%">
              <img style="width: 40px;height: 40px" :src="formData.bankCard.bankLogoUrl">
            </FormItem>
            <FormItem label="卡号：" style="width:30%">
              <div>{{ formData.bankCard.accNo }}</div>
            </FormItem>
            <FormItem label="中台银行卡id：" style="width:30%">
              <div>{{ formData.bankCard.flowId }}</div>
            </FormItem>
            <FormItem label="卡类型：" style="width:30%">
              <Tag v-if="formData.bankCard.accType===1||formData.bankCard.accType==='1'" color="success">借记卡</Tag>
              <Tag v-else color="default">贷记卡</Tag>
            </FormItem>
            <FormItem label="用户姓名：" style="width:30%">
              <div>{{ formData.bankCard.customerName }}</div>
            </FormItem>
            <FormItem label="支付标记：" style="width:30%">
              <div>{{ formData.bankCard.token }}</div>
            </FormItem>
            <FormItem label="云闪付用户标识：" style="width:30%">
              <div >{{formData.bankCard.unionpayUserId}}</div>
            </FormItem>
          </div>
        </Card>

        <Card :bordered="true" v-if="formData.abnormalPayOrders && formData.abnormalPayOrders.length">
          <p slot="title">异常流水信息</p>
          <div v-for="(item, index) in formData.abnormalPayOrders||[]" :key="index">
            <FormItem label="支付流水号：" style="width:30%">
              <div class="orderList" @click="handlePayFlow(item.flowId)">{{ item.subOrderId }}</div>
            </FormItem>
            <FormItem label="C2B 码：" style="width:30%">
              <div>{{ item.qrNo }}</div>
            </FormItem>
            <FormItem label="订单金额：" style="width:30%">
              <div>{{ getAmount(item.amount) }}</div>
            </FormItem>
            <FormItem label="支付金额：" style="width:30%">
              <div>{{ getAmount(item.payAmount) }}</div>
            </FormItem>
            <FormItem label="优惠金额：" style="width:30%">
              <div>{{ getAmount(item.couponAmount)}}</div>
            </FormItem>
            <FormItem label="商户名称：" style="width:30%">
              <div>{{ item.merchantName }}</div>
            </FormItem>
            <FormItem label="商户id：" style="width:30%">
              <div>{{ item.merchantId }}</div>
            </FormItem>
            <FormItem label="交易凭证号：" style="width:30%">
              <div>{{ item.voucherNum }}</div>
            </FormItem>
            <FormItem label="支付时间：" style="width:30%">
              <div>{{ item.payTime }}</div>
            </FormItem>
            <FormItem label="创建时间：" style="width:30%">
              <div>{{ item.createdDt }}</div>
            </FormItem>
            <Divider dashed/>
          </div>
        </Card>
      </Form>
      <Button type="primary" @click="goBack">返回</Button>
    </Loading>
  </div>
</template>
<script>
import {InputNumber, Input, Button, Form, FormItem, Message} from "view-design";
import Loading from "@/components/Loading";
import Uuid from "uuid";
import util from '@/utils/util'

import {queryDetailByOrderId} from '@/api/order';

export default {
  components: {
    InputNumber,
    Loading,
    Input,
    Button,
    Form,
    FormItem,
    Message
  },
  props: ["id"],
  beforeMount: async function () {
    // let id = this.$route.query.id;
    // let response = await this.$store.dispatch(`${namespace}/getDetail`, id);
    // console.log(response);
    // if (response.errorCode === 0) {
    //   this.formData = response.data.orderDetailVo
    //   this.formChilderData = response.data.subOrders || [{item: '4'}]
    //   this.formRefundsData = response.data.refundOrdersDetails || {item: '4'}
    //   this.formCouponsDtat = response.data.coupons
    // //   if (!response.data.subOrders || !response.data.subOrders.length) {
    // //       this.formChilderData = [{subOrderId: ''}]
    // //   }
    // //   if (!response.data.refundOrdersDetails || !response.data.refundOrdersDetails.length) {
    // //       this.formRefundsData = [{flowId: ''}]
    // //   }
    // //   if (!response.data.coupons || !response.data.coupons.length) {
    // //       this.formCouponsDtat = [{transactionId: ''}]
    // //   }
    // }
  },
  data: function () {
    let vm = this;
    return {
      taxpayerId: this.$route.query.id,
      formRef: Uuid.v1(),
      formData: {}, // 订单信息
      formChilderData: [],  // 子订单信息
      formRefundsData: {}, // 退款信息
      formCouponsDtat: [], // 优惠劵
      columns: [],
      disabled: false,
      loading:false
    };
  },
  created() {
    this.getDetail();
  },
  methods: {
    getAmount(value){
      return util.getYuan(value)
    },
    async getDetail() {
      try {
        this.loading=true
        let orderId = this.$route.query.orderId
        if (orderId) {
          const {data} =await queryDetailByOrderId(orderId)
          if(data.ret===0){
            console.log(data.data)
            this.formData=data.data
          }
        }
        this.loading=false
      } catch (error) {
        this.loading=false
        this.$Message.error({
          content: error
        })
      }
    },
    // 跳转到商户页面
    gotoQrFlowDetail () {
      if(this.formData && this.formData.flowId){
        this.$router.push({
          path: '/pay/admin/payCenter/qrFlowDetail', query: { flowId: this.formData.flowId}
        });
      }
    },
    goBack() {
      this.$router.go(-1);
    }
  },
};
</script>

<style>
</style>
<style lang="less" scoped>
.orderDetele {
  .title {
    border-bottom: 1px solid #999;
    margin-bottom: 10px;
    padding-bottom: 8px;
  }

  .orderList {
    color: blue;
    cursor: pointer;
  }

  .childerList {
    border-top: 1px solid #999;
    margin-top: 10px;
    word-break: break-all;
  }
}
</style>
